<template>
	<view class="containerbox">
		<record_header centent-margin-top="-40" class="containerbox">
			<view class="containerbox">
				<z-paging ref="paging" v-model="list" @query="querylist" class="containerbox">
					<template #top>
						<view><uv-navbar :fixed="false" bgColor="transparent" leftIconSize="0"/></view>
						<view class="text-white text-40 px-30 mb-60 mt-30">销课记录</view>
					</template>
					
					<template #loading>
						<view class="containerbox flex items-center justify-center">
							<!-- #ifdef MP-WEIXIN -->
							<view class="">
							<!-- #endif -->
							
								<view style="height: 120rpx" />
							
							<!-- #ifdef MP-WEIXIN -->
							</view>
							<!-- #endif -->
							
							<dw_loading :status="loading" />
						</view>
					</template>
					
					<!-- 统计 -->
					<view class="bgc-white round-20 px-30 mx-30 py-40 mb-30">
						<record_statistics :learn-info="recordStatistics" />
					</view>
					
					<!-- 列表 -->
					<view class="bgc-white round-20 px-30 mx-30">
						<view 
							:class="['flex-between py-35', { 'border-bottom': list.length != index + 1 }]" 
							v-for="(item, index) in list" 
							:key="index"
							@tap="openModal('info', item)"
						>
							<view class="flex-1">
								<text class="record_list-title text-30">{{ item.course?.name }}</text>
								<view class="mt-20 text-24">
									<text class="text-primary mr-20">{{ item.courseType?.name }}</text>
									<text class="text-qgray">{{ item.startTime }}</text>
								</view>
							</view>
							
							<view class="flex items-center" @tap.stop>
								<view class="mx-30 w-60 h-60" @tap="openModal('print', item)">
									<uv-image :src="`${imgPath}record/print.svg`" width="60rpx" height="60rpx" />
								</view>
								
								<view class="h-60 flex items-center justify-center" style="width: 65rpx" @tap="tolearningReport(item)">
									<uv-image :src="`${$imageBaseUrl}/record.svg`" width="65rpx" height="65rpx"/>
								</view>
							</view>
						</view>
					</view>
				</z-paging>
			</view>
		</record_header>
			
		<dw_tabbar :fiexd="true" />
	</view>
		
	<modal_print v-model="modalPrint" :learn-id="learnInfo.id" />
	<modal_info v-model="modalInfo" :learn-info="learnInfo" />
</template>

<script setup>
	
	import { ref, computed, nextTick } from 'vue'
	import { imgPath } from '@/common/config'
	import { getAppointmentlist, vocabularvAll } from '@/common/apis/record'
	import { onShow, onShareAppMessage, onShareTimeline} from "@dcloudio/uni-app"
	import record_header from '@/pages/components/header'
	import record_statistics from '../components/statistics.vue'
	
	import modal_print from './components/printModal.vue'
	import modal_info from './components/infoModal.vue'
	
	
	let paging = ref(null)
	let list = ref([])
	let loading = ref(true)
	
	let { user } = uni.$store()
	
	let recordStatistics = computed(() => {
		if(user.userInfo){
		let { totalTeacherLearnTime, totalClassHour, totalCourse, userSelfLearnCount } = user.userInfo?.statistics
		return { one: totalClassHour?totalClassHour:0, two: totalTeacherLearnTime?totalTeacherLearnTime:0, three: userSelfLearnCount?userSelfLearnCount:0 }
		}
	})
	
	onShow(() => {
		nextTick(async () => {
			list.value.length == 0 && await paging.value?.reload()
			let subscribeId = uni.getStorageSync('subscribeId')
			if (subscribeId) list.value.map(item => {
				if (item.id == subscribeId) item.isUserComment = true
			})
		})
	})
	
	async function querylist(page, pageSize) {
		let params = { page, pageSize, simplePage: 1 }
		let result = await getAppointmentlist(params)
		uni.$fui.sleep(() => loading.value = false)
		paging.value.complete(result)
	}
	
	let modalPrint = ref()
	let modalInfo = ref()
	let learnId = ref('')
	let learnInfo = ref({})
	
	async function openModal(type, item) {
		learnInfo.value = item
		switch(type) {
			case 'print':
			uni.setClipboardData({
				data: item.printUrl,
				success: () => {
					uni.hideToast()
					modalPrint.value = true
				},
				fail: () => uni.$fui.toast('复制失败', 'error')
			})
			break;
			
			case 'info':
			uni.showLoading({ title: '整理单词中~' })
			const result = await vocabularvAll({ courseId: item.course?.id })
			let html = ''
			result.map(item => html += `${item.word} `)
			
			uni.setClipboardData({
				data: html,
				success: () => {
					uni.hideToast()
					modalInfo.value = true
				},
				fail: () => uni.$fui.toast('复制失败', 'error'),
				complete: () => uni.hideLoading()
			})
			break;
		}
	}
	
	
	/** 学习报告 */
	const tolearningReport = item => {
		uni.$fui.href('/pages/records/report', {
			id: item.id,
			userId: item.user.id
		});
	};
	
	
</script>

<style scoped lang="scss">
	.record_list-title{color: #3A3F5E}
</style>